import React, { Component } from 'react'
import axios from 'axios'
import { publicIp } from '@/services/apiIp'
import { cond } from 'lodash'
class veWithToken extends Component {
  state = {
    imageSrc: null,
  }
  constructor(props) {
    super(props)
    this.state = {}

    //如果父组件传来该方法 则调用方法将子组件this指针传过去
    if (props.onRef) {
      props.onRef(this)
    }
  }
  componentWillReceiveProps(newProps) {
    // this.setState({ treeData: newProps.treeData })
  }
  componentDidMount() {
    console.log(this.props)
    this.fetchImage(this.props.src)
  }
  fetchImage = async (src) => {
    try {
      const url = publicIp + '/' + src // 你的图片资源URL
      // 根据API需求选择正确的头字段，这里假设只需要Authorization
      const headers = {
        Authorization: 'token ' + sessionStorage.getItem('token'),
      }

      const response = await axios({
        method: 'GET',
        url,
        headers,
        responseType: 'blob', // 保留blob响应类型
      })
      // 创建一个 Blob URL，这样我们可以将其设置为 <video> 标签的 src
      const videoUrl = URL.createObjectURL(new Blob([response.data]))

      // 假设你有一个 <video> 元素
      const videoElement = document.querySelector('video')
      videoElement.src = videoUrl

      // 监听视频加载完成，释放 Blob URL
      videoElement.onloadedmetadata = function () {
        // 视频元数据已加载，可以开始播放
        // 如果你想在视频播放结束后释放 Blob URL，可以添加以下事件监听器
        videoElement.addEventListener(
          'ended',
          function () {
            URL.revokeObjectURL(videoUrl)
          },
          { once: true }
        )
      }
      // videoElement.play();
    } catch (error) {
      console.error('Error fetching image:', error)
    }
  }
  fat = (token) => {
    const videoElement = document.querySelector('video')
    videoElement.pause()
  }
  render() {
    const { imageSrc } = this.state
    return (
      <video style={{ width: '100%', height: '450px' }} controls>
        <source type="video/mp4" />
        {/* <source src='https://www.runoob.com/try/demo_source/movie.mp4' type="video/mp4" /> */}
        {/* 如果视频资源未加载，则显示提示信息 */}
        {!imageSrc && <p>Loading video...</p>}
        {/* 使用JavaScript的navigator对象来检测视频支持，而不是简单地显示不支持的文本 */}
        <script
          dangerouslySetInnerHTML={{
            __html: `
        if (!document.createElement('video').canPlayType) {
            document.write('<p>Your browser does not support the video tag.</p>');
        }
    `,
          }}
        />
      </video>
    )
  }
}
export default veWithToken
